<template>
  <div>
    <!-- 热门城市 -->
    <p style="height:30px;background:#eee;line-height:30px;font-size:13px">热门城市</p>
    <div>
      <div v-for="(item,index) in crtylist" :key="index" class="crty_content" @click="zhu(item)">{{item}}</div>
    </div>

    <van-index-bar>
      <van-index-anchor v-for="(value,key,index) in good" :key="index" :index="key">
        {{ key }}
        <van-cell v-for="(item,i) in value" :key="i" :title="item.name" @click="zhu(item.name)"/>
      </van-index-anchor>
    </van-index-bar>

  </div>
</template>
<script>
export default {
  data() {
    return {
      crtylist: [ 
        "北京",
        "上海",
        "三亚",
        "香港",
        "杭州",
        "广州",
        "成都",
        "深圳",
        "苏州",
        "桂林",
        "西安",
        "厦门",
      ],
      good: [],
    };
  },
  mounted() {
    this.$axios.get("./static/api/city.json").then((res) => {
      // console.log(res.data.data.cities);
      this.good = res.data.data.cities;
    });
  },
  methods:{
    zhu(i){
      // console.log(i)
      this.$router.push({
        path:'/',
        query:{
          name:i
        }
      })
    }
  }
};
</script>
<style lang="stylus" scoped>
.crty_content {
  display: inline-block;
  width: 32.5%;
  height: 40px;
  border: 1px solid gray;
  text-align: center;
  line-height: 40px;
}

</style>